<template>
	<!-- <component :is="comName"></component> -->
	<div>
		<!-- {{$store.state.user}} -->
		<div class="button-box" v-for="item of buttonList" :key="item.id" @click="tiaozhuan(item.url)">
			{{item.name}}
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	// import adminHome from './adminHome.vue'
	// import userHome from './userHome.vue'

	export default {
		name: 'Dashboard',
		components: {
			// adminHome,
			// userHome
		},
		data() {
			return {
				socket: null,
				comName: ''
			}
		},
		mounted() {
			if (this.form == 1) {
				this.comName = 'adminHome'
			} else if (this.form == 2) {
				this.comName = 'userHome'
			}
		},
		computed: {
			buttonList() {
				var arr = []
				var list = this.$store.state.user.menus
				for (var i = 0; i < list.length; i++) {
					var item = list[i]
					if (item.url !== '#') {
						arr.push({
							name: item.name,
							url: item.url,
							id: item.id,
						})
					}
				}
				return arr
			}
		},
		methods: {
			tiaozhuan(url) {
				this.$router.push(url)
			}
		}
	};
</script>

<style scoped>
	.button-box {
		width: 200px;
		height: 90px;
		line-height: 90px;
		background-color: #008FFD;
		display: inline-block;
		margin: 5px;
		text-align: center;
		cursor: pointer;
		border-radius: 5px;
		color: #fff;
		font-size: 17px;
		transition: all .2s;
	}

	.button-box:hover {
		background-color: #34c9ff;
	}
</style>
